/*
 * @Descripttion:
 * @version:
 * @Author: kl2018
 * @Date: 2020-03-17 09:11:31
 * @LastEditors: kl2018
 * @LastEditTime: 2020-10-21 11:19:02
 */
import React, { PureComponent } from 'react';
import { WeaEchart, WeaAlertPage, WeaLocaleProvider } from 'ecCom';
import { toJS } from 'mobx';
import PieEchart from '../../util/pieEcharts';
import CategoryEcharts from '../../util/categoryEcharts';
import OdocDialogComponent from '../common/OdocDialogComponent';
import CustomTableComp from '../customTablePage/CustomTableComp';
import { isEqual } from "lodash";

const { getLabel } = WeaLocaleProvider;

export default class CustomReportComp extends PureComponent {
  constructor(props) {
    super(props);
    this.getColumns = this.getColumns.bind(this);
    this.weaTableProps = {
      rowKey: this.getRowKey,
      heightSpace: 100,
    };
    this.state = {
      visible: false,
      selectedTabKey: '',
    };
  }

  componentDidUpdate (preProps) {
    if (!isEqual(preProps, this.props)) {
      this.chart.clear();
      this.chart.paint();
    }
  }

  render () {
    const { echartsOption } = this.props;
    const { visible, selectedTabKey } = this.state;
    const { series = [], seriesData = [], echartsType = '' } = echartsOption[0];
    const reportOption = this.getReportOption();
    if (echartsType === '' || (series.length == 0 && seriesData.length == 0)) {
      return (
        <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@prjewb`}
          icon={<i className="icon-coms-blank" />}
          iconSize={120}
          paddingTop="20%"
        >
          <div style={{ color: '#000' }}>
            {getLabel('83553', '占无数据')}
          </div>
        </WeaAlertPage>
      );
    }
    return (
      <div className="echarts">
        <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@bnzlvu`}
          key={echartsType}
          ref={this.getRef}
          option={toJS(reportOption)}
          useDefault={false}
          style={{ width: '100%', height: '100%' }}
          chartAction={this.chartAction}
        />
        {

          <OdocDialogComponent ecId={`${this && this.props && this.props.ecId || ''}_OdocDialogComponent@2udkc6`}
            title={getLabel('', '公文办理清单')}
            style={{ width: '70%', height: '700px' }}
            visible={visible}
            onCancel={this.dialogHide}
          >
            {visible &&
              <CustomTableComp
                ecId={`${this && this.props && this.props.ecId || ''}_CustomTableComp@2jxj60`}
                needTop={false}
                selectedTabKey={selectedTabKey}
                customTabId={selectedTabKey}
                location={{ query: { customListId: -30 } }}
                showSearchGroup={false}
                weaTableProps={this.weaTableProps}
                {...this.props}
              />
            }
          </OdocDialogComponent>
        }

      </div>
    );
  }

  getReportOption () {
    const { echartsOption } = this.props;
    let color = [];
    let charts = null;
    let options = null;
    if (echartsOption[0].color.length != 1) {
      color = echartsOption[0].color;
    }
    if (echartsOption[0].echartsType == '0') {
      charts = new CategoryEcharts(
        echartsOption[0].xAxisData,
        echartsOption[0].series,
        echartsOption[0].title,
        echartsOption[0].legendData,
        echartsOption[0].series.length,
      );
    }
    if (echartsOption[0].echartsType == '1') {
      charts = new PieEchart(
        echartsOption[0].legendData,
        echartsOption[0].seriesData,
        echartsOption[0].title, 'pie',
      );
    }
    if (echartsOption[0].echartsType == '2') {
      charts = new PieEchart(
        echartsOption[0].legendData,
        echartsOption[0].seriesData,
        echartsOption[0].title, 'loop',
      );
    }
    if (color.length > 0) {
      charts.setColor(color);
    }
    options = charts.getOption();
    if (echartsOption[0].showLegend == '0') {
      delete options.legend;
    }

    return options;
  }

  chartAction = (chart) => {
    const { echartsOption } = this.props;
    const { echartsType = '' } = echartsOption[0];
    chart.off('click');
    chart.on('click', (params) => {
      if (echartsType == 0) {
        const option = chart.getModel().option;
        const dataKey = option.series[params.seriesIndex].dataKey[params.dataIndex];
        this.setState({ visible: true, selectedTabKey: dataKey });
      } else {
        this.setState({ visible: true, selectedTabKey: params.data.id });
      }
    });
  }

  getColumns (column) {
    return column;
  }

  dialogHide = () => {
    this.setState({ visible: false, selectedTabKey: '' });
  }

  getRowKey = record => `${record.randomFieldId}_${record.userid || ''}`;

  getRef = refs => this.chart = refs
}
